<template>
  <div class="Home-page">
    <div class="van-calendar__header-subtitle">
      <van-nav-bar
          title="注册"
          left-text="返回"
          left-arrow
          @click-left="go_back"
      />
    </div>
    <div class="Home-contre">
      <van-form validate-first>
        <van-field
            v-model="formant.phone"
            label = "手机号"
            center
            maxlength="11"
            type="number"
            input-align="left"
            clearable
            placeholder="请输入正确内容"
            :rules="[{ pattern, message: '请输入正确内容' }]"
        >
          <template #button>
            <van-button size="small_set" round type="primary" v-if="is_show" @click="change_show_state">
              发送验证码
            </van-button>
            <van-button disabled size="small_get" round type="primary" v-else>
              <van-count-down :time="this.$store.state.TIME_COUNT" @finish="change_show_state"  format="剩余时间 ss 秒"/>
            </van-button>
          </template>
        </van-field>

        <van-field
            v-model="formant.password"
            label = "设置密码"
            center
            input-align="left"
            clearable
            type="number"
            maxlength="20"
            placeholder="请设置登录密码"
        ></van-field>

        <van-field
            v-model="formant.code"
            label = "验证吗"
            center
            input-align="left"
            clearable
            type="number"
            maxlength="6"
            placeholder="请输入验证码"
        ></van-field>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit" @click="onFailed">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>

</template>

<script>
import {reactive,ref} from "vue"
import {Toast} from "vant";

export default {
  name: "enroll",
  data(){
    return{
      pattern:/^1[3456789]\d{9}$/,
    }
  },
  setup(){
    const formant = reactive({
      phone:ref(""),
      code:ref(""),
      password:ref("")
    })
    const is_show = ref(true)
    return {formant, is_show}
  },
  methods:{
    go_back: function() {
      this.$router.go(-1)
    },
    change_show_state: function() {
      Toast.success("已发送验证码，请前往查看")
      this.is_show = !this.is_show
    },
    onFailed:function() {
      Toast.loading('正在注册...');
      console.log(JSON.stringify(this.formant));
    }
  }
};

</script>

<style scoped>

</style>
